<template>
  <el-dialog
    v-model="dialogVisible"
    :title="Tips"
    width="80%"
    top="2.5vh"
    :before-close="handleClose"
    :close-on-click-modal="false"
    v-if="dialogVisible"
  >
    <div class="Parperlist">
        <div class="form">
            <el-form :inline="true" :model="data" class="demo-form-inline">
                <el-form-item label="试卷名称">
                    <el-input v-model="params.key" placeholder="请输入试卷名称"/>
                </el-form-item>
                <el-form-item label="创建人" value="">
                    <el-input v-model="params.admin" placeholder="请输入创建人昵称"/>
                </el-form-item>
               <div class="as">
                 <el-checkbox
                  v-model="params.ismy"
                  true-label="1"
                  false-label="0"
                  size="large"
                  @change="change"
                 />
                 <span style="padding:0px 10px">只看我创建的</span>
                 <el-button type="primary" style="height:30px;font-size:12px" @click="sel">查询</el-button>
               </div>
            </el-form>
        </div>
          <ItemList></ItemList>
        <div class="tab">
            <el-table :data="Datalist"  style="width: 100%" v-loading="fullscreenLoading">
              <el-table-column label="题库名称" width="180">
                <template #default="scope">
                  <el-radio-group v-model="radio" class="ml-4" @change="changeRadio">
                    <el-radio :label="scope.row.id" size="large">{{scope.row.title}}</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column prop="counts" label="题目数量" width="180" />
              <el-table-column prop="addtime" label="创建时间" />
              <el-table-column prop="admin" label="创建人" />
            </el-table>
        </div>
        <div class="pagin">
          <el-pagination
            v-model:currentPage="params.page"
            v-model:page-size="params.psize"
            :page-sizes="[10, 20, 50, 100]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="()=>{params.key='',params.page=1,datas.isShow=false,radio=[]}" style="font-size:12px">取消</el-button>
        <el-button type="primary" @click="que"
           style="font-size:12px">确定</el-button
        >
      </span>
    </template>
    
  </el-dialog>
  
</template>

<script lang="ts" setup>
import { inject, reactive, toRefs, watch, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
// 引入题库列表，
import {Database,SubjectsList,QuestionList,getTest,Subjects} from '../../apis/test/test'
// 题库列表弹框
import ItemList from '../../components/test/ItemList.vue'
// 导入编码
import {htmlEncodeByRegExp} from '../../utils/HtmlUtil'
const data:any = reactive({
    // 标题名
    Tips:"",
    dialogVisible:false,
    params:{
      // 试卷名称
      key:'',
      // 创建人
      admin:'',
      // 多选框
      ismy:0,
      page:1,
      psize:10
    },
    // 单选框
    radio:'',
    // 题库列表
    Datalist:[],
    // loading效果
    fullscreenLoading:true,
    total:0,
    background:true,
    // 题库列表开关
    is:false,
    // 题库ID
    databaseid:0,
    ids:0,
    arr:[]
})
const {arr,ids,databaseid,background,Tips,dialogVisible,params,Datalist,fullscreenLoading,radio,total}:any = toRefs(data)
// 接受父组件的参数
const props = defineProps({
    state:{
        type:Boolean
    },
    name:{
        type:String
    }   
})
// watch监听
watch([props],()=>{
    data.Tips=props.name
    switch(props.name){
      case '题库列表':baseList() 
      break
      case '试卷列表':SubsList()
      break
    }
})
const datas:any=inject('data')
watchEffect(()=>{
  dialogVisible.value=datas.isShow
})
// 关闭触发事件
const handleClose = (done: () => void) => {
      done()
      radio.value=[]
      params.value.key=''
      params.value.page=1
      datas.isShow=false
}
// watchEffect监听
watchEffect(() => {
  if (params.value.admin !== "") {
      params.value.ismy = 0
  }
});
const change=(val:any)=>{
  if(val=='1'){
    params.value.admin=''
  }
}
// 题库列表
const baseList= async ()=>{
  const res:any = await Database(params.value)
  // console.log(res)
  if(res.errCode==10000){
    data.Datalist = res.data.list
    total.value=res.data.counts
  }else{
    ElMessage(res.errMsg)
  }
    fullscreenLoading.value=false
}
// 试卷列表
const SubsList =async ()=>{
  fullscreenLoading.value=true
  const res:any = await SubjectsList(params.value)
  // console.log(res)
   if(res.errCode==10000){
    data.Datalist = res.data.list
  }else{
    ElMessage(res.errMsg)
  }
  fullscreenLoading.value=false
}
// 查询
const sel=()=>{
   switch(props.name){
      case '题库列表':baseList() 
      break
      case '试卷列表':SubsList()
      break
    }
}
// 分页
const handleSizeChange = (val: number) => {
   params.value.psize=val
   props.name==='题库列表'?baseList():SubsList()
}
const handleCurrentChange = (val: number) => {
  params.value.page=val
  props.name==='题库列表'?baseList():SubsList()
}

// 单选框内容改变
const changeRadio =(e:any)=>{
    ids.value = e
}

// 列表方法
const DatabaseList =async  ()=>{
  const res:any = await QuestionList(ids.value)
  console.log(res)
  if(res.errCode===10000){
    datas.DataList = res.data.list
    datas.Tips = res.data.database.title
  }else{
    ElMessage.error(res.errMsg)
  }
}

// 获取单条试卷
const PaperList=async ()=>{
  const res:any = await Subjects(ids.value)
  if(res.errCode==10000){
    // res.data.
    datas.params.questions = res.data.questions.map((item:any)=>({...item,title:htmlEncodeByRegExp(item.title)}))
  }else{
    ElMessage.error(res.errMsg)
  }
}
// 确定
const que=()=>{
    if(props.name=='题库列表'){
      if(ids.value!=0){
        datas.isShow1 = true
        datas.isShow = false
        DatabaseList()
      }
    }
    if(props.name=='试卷列表'){
        if(ids.value!=0){
          datas.isShow = false
          PaperList()
        }
    }
    databaseid.value = ids.value
    params.key='',
    params.page=1
}
</script>
<style scoped lang="less">
@import url('../../static/css/test/list.css');
.dialog-footer button:first-child {
  margin-right: 10px;
}

</style>